import React, { Component } from 'react'
import { WhiteSpace, Button, Toast } from 'antd-mobile'
import { NavBar, Item, Icon } from 'components'
import { post, msg } from '../../utils'
// import { post } from '../../utils'

export default class RecoveredPsw extends Component<any, any> {

    public autoFocusInst: any

    public state = {
        pswInputType: 'password',
        loginBtnLoading: false,
        account: '',
        verifyCode: '',
        psw: '',
        reLabel: false,
        label: '发送验证码',
        isGetVerification: false,
        accountError: false,
        verifyCodeError: false,
        pswError: false
    }

    private allTime: number = 60

    private verifyMsg: string = ''

    private verificationPhoneTimer: number

    public render(): JSX.Element {
        const { loginBtnLoading, account, psw, verifyCode, isGetVerification, accountError, pswError } = this.state
        return (
            <div className="recoveredPsw">
                <div className="recoveredPsw_NavBar">
                    <div className="recoveredPsw_NavBar_conent">
                        <NavBar divider={false} title={<div className="recoveredPsw_NavBar_title">找回密码</div>} />
                    </div>
                </div>
                <div className="recoveredPsw_inputWrap">
                    <Item
                        className={`recoveredPsw_accountItem ${(accountError && account.length > 0) ? 'login_error_active' : ''}`}
                        title={this.accountInput()}
                    />
                    <WhiteSpace className="recoveredPsw_whiteSpace" />
                    {this.verificationCodeInput()}
                    <WhiteSpace className="recoveredPsw_whiteSpace" />
                    <Item
                        className={`recoveredPsw_accountItem ${(pswError && psw.length > 0) ? 'login_error_active' : ''}`}
                        title={this.pswInput()}
                    />
                </div>

                <div className="recoveredPsw_btnWrap">
                    <Button
                        className={`recoveredPsw_btnWrap_btn_default`}
                        loading={loginBtnLoading}
                        type="primary"
                        activeStyle={false}
                        onClick={this.handleLogin}
                        disabled={account.length === 0
                            || psw.length === 0 || verifyCode.length !== 4 || !isGetVerification}
                    >
                        提交
                    </Button>
                </div>
            </div>
        )
    }

    private accountInput = () => {
        const { account } = this.state
        return (
            <div className="recoveredPsw_accountItem_title">
                <div>
                    <Icon type="phone" className="recoveredPsw_accountItem_left_icon" />
                </div>
                <input
                    value={account}
                    placeholder="请输入手机号/用户名"
                    maxLength={11}
                    type="tel"
                    onChange={this.handleInputValue.bind(this, 'account')}
                />
                <div className="recoveredPsw_accountItem_right_icon">
                    {(account.length > 0)
                        ? <span className="mobileLogin_accountItem_right_erroricon">
                            <Icon type="error" onClick={this.handleClearValue.bind(this, 'account')} /></span>
                        : ''
                    }
                </div>
            </div>
        )
    }

    private pswInput = () => {
        const { pswInputType, psw } = this.state
        return (
            <div className="recoveredPsw_accountItem_title">
                <div>
                    <Icon type="lock" className="recoveredPsw_accountItem_left_icon" />
                </div>
                <input
                    value={psw}
                    maxLength={18}
                    placeholder="请设置6~18位登陆密码"
                    type={pswInputType}
                    onChange={this.handleInputValue.bind(this, 'psw')}
                />
                <div className="recoveredPsw_accountItem_right_icon">
                    {
                        (psw.length > 0)
                            ? <span style={{ color: '#aaa', position: 'absolute', left: '-0.5rem', top: '0' }}>
                                <Icon type="error" onClick={this.handleClearValue.bind(this, 'psw')} />
                            </span>
                            : ''
                    }
                    {this.handlePswIcon()}
                </div>
            </div>
        )
    }

    private verificationCodeInput = () => {
        const { verifyCode, label, reLabel, verifyCodeError, account } = this.state
        return (
            <div className={`recoveredPsw_verification_item`}>
                <div className={`recoveredPsw_verification_input ${(verifyCodeError) ? 'login_error_active' : ''}`}>
                    <Icon type="lock" className="recoveredPsw_verification_item_icon" />
                    <input
                        type="tel"
                        value={verifyCode}
                        placeholder="请输入短信验证码"
                        maxLength={4}
                        onChange={this.handleInputValue.bind(this, 'verifyCode')}
                    />
                </div>
                {/* <Button className="recoveredPsw_verification_btn" disabled={false} onClick={this.getVerification}>
                    {getVerificationText}
                </Button> */}
                <Button className={`recoveredPsw_verification_btn ${(account.length === 11) ? 'recoveredPsw_verification_btn_active' : ''}`} disabled={reLabel} onClick={this.handleSendMsg}>{label}</Button>
            </div>
        )
    }
    private handlePswIcon = () => {
        const { pswInputType } = this.state
        if (pswInputType === 'text') {
            return (
                <Icon type="show_eye" style={{ color: '#aaaaaa' }} onClick={this.showPsw} />
            )
        } else {
            return (
                <Icon type="hide_eye" style={{ color: '#aaaaaa' }} onClick={this.showPsw} />
            )
        }
    }
    private handleInputValue = (key: string, e: any) => {
        const val = e.target.value
        this.setState({
            [key]: val
        })
    }
    private handleClearValue = (key: string) => {
        this.setState({
            [key]: ''
        })
    }
    private handleSendMsg = () => {
        if (!this.handleCheckPhone()) {
            return
        }
        msg(`我们将发送验证码短信到这个手机号码： +86 ${this.state.account}`, '确认手机号码').then(() => {
                this.setState({
                    reLabel: true,
                    isGetVerification: true,
                })
                post('usersapi/sendSms', { phone: this.state.account, type: 2 }).then((data: any) => {
                    this.verifyMsg = `${data}`
                    this.setState({
                        reLabel: true,
                        label: '重新发送' + this.allTime + 'S',
                    })
                    const handleCountDown = () => {
                        this.allTime--
                        if (this.allTime === 0) {
                            this.setState({
                                label: '重新发送',
                                reLabel: false
                            })
                            clearInterval(this.verificationPhoneTimer)
                            this.allTime = 60
                        } else {
                            this.setState({
                                reLabel: true,
                                label: '重新发送' + this.allTime + 'S',
                            })
                        }

                    }
                    this.verificationPhoneTimer = window.setInterval(handleCountDown, 1000)
                }).catch((err: any) => {
                    this.setState({
                        reLabel: false
                    })
                })
            })
    }
    private handleCheckPhone = () => {
        const account = this.state.account
        const reg = /^[1][3,4,5,7,8][0-9]{9}$/
        if (account.length === 0) {
            Toast.info('请输入手机号码！', 1)
            return false
        } else {
            if (!reg.test(account)) {
                Toast.info('手机格式不正确！', 1, () => { this.showError('accountError') })
                return false
            }
        }
        this.showAccess('accountError')
        return true
    }
    private handleCheckVerification = () => {
        const verifyCode = this.state.verifyCode
        if (verifyCode.length !== 4) {
            Toast.info('请输入验证码！', 1)
            return false
        } else {
            if (verifyCode !== this.verifyMsg) {
                Toast.info('验证码不正确!', 1, () => { this.showError('verifyCodeError') })
                return false
            }
        }
        this.showAccess('verifyCodeError')
        return true
    }
    private handleCheckPsw = () => {
        const psw = this.state.psw
        const reg2 = /([a-zA-Z0-9!@#$%^&*()_?<>{}]){8,18}/
        const reg3 = /[a-zA-Z]+/
        const reg4 = /[0-9]+/
        if (!psw || psw.length === 0) {
            Toast.info('请输入密码！', 1)
            return false
        } else if (!reg2.test(psw)) {
            Toast.info('密码长度在8-18位', 1, () => { this.showError('pswError') })
            return false
        } else if (!reg3.test(psw)) {
            Toast.info('密码需含有字母', 1, () => { this.showError('pswError') })
            return false
        } else if (!reg4.test(psw)) {
            Toast.info('密码需含有数字', 1, () => { this.showError('pswError') })
            return false
        } else {
            this.showAccess('pswError')
            return true
        }
    }
    private showPsw = () => {
        const { pswInputType } = this.state
        let val: string = ''
        if (pswInputType === 'text') {
            val = 'password'
        } else {
            val = 'text'
        }
        this.setState({
            pswInputType: val
        })
    }
    private showError(key: string) {
        this.setState({
            [key]: true
        })
    }
    private showAccess(key: string) {
        this.setState({
            [key]: false
        })
    }
    private handleLogin = () => {
        const { account, psw } = this.state
        if (!this.handleCheckPhone() || !this.handleCheckVerification() || !this.handleCheckPsw()) {
            return
        }
        this.setState({
            loginBtnLoading: true
        })
        post('usersapi/findUserPwd', {
            phone: account,
            pwd: psw,
        }).then((data: any) => {
            this.setState({
                loginBtnLoading: false
            })
            Toast.info('重置密码成功！,跳转中...', 2, () => {this.props.history.go(-1)})
        }).catch(() => {
            this.setState({
                loginBtnLoading: false
            })
        })
    }

}